<template>
  <button :class="['relative group', className]" @click="onClick">
    <div
      class="absolute -inset-2 bg-gradient-to-r from-red-600 to-orange-600 rounded-xl
      blur opacity-0 group-hover:opacity-20 transition duration-300"
    >
    </div>
    <div class="relative">
      <component :is="icon" class="h-6 w-6 text-gray-700 
      group-hover:text-red-500 transition-colors duration-200"/>
      <div 
        v-if="count" 
        class="absolute -top-2 -right-2 
        bg-gradient-to-r from-red-400 to-red-600
        text-white text-xs font-bold 
        rounded-full h-5 w-5 flex items-center justify-center"
      >
        {{ count }}
      </div>
    </div>
  </button>
</template>

<script>
export default {
  name: 'IconButton',
  props: {
    icon: {
      type: Object,
      required: true
    },
    count: {
      type: Number,
      default: null
    },
    className: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const onClick = () => {
        console.log("onclick");
      emit('icon-click')
    }
    
    return {
      onClick
    }
  }
}
</script>